import React from "react";
import {
    AutoCenter,
    Button,
    Calendar,
    CheckList,
    Dialog,
    Form,
    Input,
    Modal, NoticeBar,
    Popup,
    SearchBar, Selector, Space,
    Steps, Swiper, Tabs,
    TextArea,
    Toast, WaterMark
} from 'antd-mobile'

import moment, {calendarFormat} from "moment";
import cookie from "_react-cookies@0.1.1@react-cookies";
import EnturstWithPlanNum from "./compontents/EnturstWithPlanNum";

export default class TimeEntrusted extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            phone: '',       //电话
            name:'',


            planName: '',            //计划名称
            planType: '',            //计划类型
            dayPlan: '',             //日计划
            planDate: '',            //计划时间


            planList:[],     //按周期筛选出的计划列表
            planNumberList:[],   //按周期筛选出的计划号
            planListSelected:[],   //选中的计划号列表
            trusteeList: '',             //受托人列表
            trusteeId:'',   //受托人ID



            planNumber: '',         //计划号
            trustee: '',             //受托人
            startDate: '',           //委托开始日期
            endDate: '',             //委托结束日期
            reason: '',              //委托原因

            stap: 0,                //步骤条组件
            bottonPopShow: false,   //按时间段委托底部弹出组件
            bottomPopShow1:false,   //按计划号委托底部弹出组件
            closeOnAction: false,    //弹出框组件
            dialogVisible: false,    //受托人选择组件

            options:[],


            message: '测试值',


            peopleList: ["A", "B", "C", "D", "E", "F", "G"],


        }
    }

    onFinish = (values: any) => {

        if (this.state.trustee.length > 0) {
            if (this.state.startDate === '') {
                return (
                    Toast.show({
                        icon: 'fail',
                        content: '请选择委托周期',
                        position: 'center',
                    })
                )
            }
            console.log(values)
            this.setState({signState: values["inOrOut"]})
            this.setState({planNumber: values["planNumber"]})
            this.setState({reason: values["reason"]})
            this.setState({stap: 1})
            this.setState({bottonPopShow: true})
            this.setState({entrustedTime: values["time"]})


            //提取用户信息
            const url1 ='http://htjoa.nrnet.cn/dc14/construct/user/user?phone='+this.state.phone;
            fetch(url1,{method:"GET"
            })
                .then(res=>res.json()).then(result=>{
                if (result["code"]=="200"){
                    console.log("人员信息",result)
                    this.setState({name:result["name"]})
                }
                else {
                    Toast.show("暂无该用户信息")
                }
            })
        } else {
            return (
                Toast.show({
                    icon: 'fail',
                    content: '请选择受托人',
                    position: 'center',
                })
            )
        }


        //TODO 如果没有查到有关信息


    }


    submitSign = () => {

            //const start = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00")
            //const end = moment(this.state.endDate).format("YYYY-MM-DD 00:00:00")

                const url ='http://htjoa.nrnet.cn/dc14/construct/timeproxy/setproxy?phone='+this.state.phone+'&entrustedId='+this.state.trusteeId+'&entrustedName='+this.state.trustee+'&reason='+this.state.reason+'&startTime='+this.state.startDate+'&endTime='+this.state.endDate;
                console.log(url)
                fetch(url, {
                    method: "get",
                }).then(res=>res.json())
                    .then(result=>{
                        console.log(result)
                        if (result["code"]==200){
                            console.log("yes")
                        }
                        else {
                            Modal.alert({
                                content: '提交失败,请检查网络',
                                onConfirm: () => {
                                    // TODO 跳转回主页
                                    // Toast.show("返回主页")
                                    // this.props.history.push('/dc14/const/index')
                                    this.setState({bottonPopShow: false})
                                },
                            })
                        }
                    }

        )
        Modal.alert({
            content: '委托提交成功',
            onConfirm: () => {
                // TODO 跳转回主页
                // Toast.show("返回主页")

            },
        })
        this.props.history.push('/mainpage')


    }

    getTrusteeList =()=>{
        this.refIns = React.createRef();
        const url = 'http://htjoa.nrnet.cn/dc14/construct/user/trustee';
        fetch(url, {
            method: "GET"
        })
            .then(res => res.json()).then(result => {
            console.log(result)
            if (result["code"] == "200") {
                console.log(result)
                this.setState({trusteeList: result["trustee"]})
            }
        })
    }


    componentDidMount() {
        this.setState({phone:cookie.load("phone")})
        document.title='创建委托'
        //this.getTrusteeList()


        const url2 ='http://htjoa.nrnet.cn/dc14/construct/user/trustee?phone='+cookie.load("phone");
        fetch(url2,{method:"GET"
        })
            .then(res=>res.json()).then(result=>{
            if (result["code"]=="200"){
                console.log(result["trustee"])
                this.setState({trusteeList:result["trustee"]})
            }
        })
    }



    render() {
        const options = [
        ]


        let list = [...this.state.trusteeList];
        return (
            <div style={{marginTop:'15px'}}>
                {/*<Steps current={this.state.stap}>*/}
                {/*    <Step title='1. 填写委托信息'/>*/}
                {/*    <Step title='2. 提取信息'/>*/}
                {/*    <Step title='3. 提交委托'/>*/}
                {/*</Steps>*/}




                        <Form
                            ref={this.refIns}
                            onFinish={this.onFinish}
                            footer={
                                <Button block type='submit' color='primary' size='large'>
                                    提取信息
                                </Button>
                            }
                            className='signForm'>

                            <Form.Item

                                label="受托人"
                            >
                                <Input value={this.state.trustee}/>
                                <Button
                                    color='primary' fill='outline'
                                    onClick={() => {
                                        this.setState({dialogVisible: true})
                                    }}
                                >
                                    选择受托人
                                </Button>


                            </Form.Item>

                            <Form.Item
                                label="委托周期"
                            >
                                <Button

                                    color='primary' fill='outline'
                                    onClick={() => {
                                        Dialog.show({
                                            closeOnMaskClick:true,
                                            disableBodyScroll:false,
                                            content: (
                                                <div style={{height:"300px"}}>

                                                    <Calendar
                                                        defaultValue={new Date()}
                                                        selectionMode='single'
                                                        onChange={val => {
                                                            this.setState()
                                                            const d = new Date(val);
                                                            const  startdate = moment(d).format("YYYY-MM-DD");
                                                            this.setState({startDate: startdate})

                                                        }}
                                                    />


                                                {/*<Calendar*/}
                                                {/*    selectionMode='single'*/}
                                                {/*    onChange={val => {*/}
                                                {/*        //TODO 将数据存储到*/}
                                                {/*        // console.log(val[0])*/}
                                                {/*        const d = new Date(val[0]);*/}


                                                {/*        // const  startdate =d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() ;*/}
                                                {/*        this.setState({startDate: moment(d).format('YYYYMMDD')})*/}
                                                {/*        const d1 = new Date(val[1]);*/}
                                                {/*        this.setState({endDate: moment(d1).format('YYYYMMDD')})*/}
                                                {/*        // const  endDate =d1.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() ;*/}

                                                {/*        // console.log(val[1])*/}

                                                {/*        //提起委托信息*/}
                                                {/*        const url1 ="http://htjoa.nrnet.cn/dc14/construct/plan/planList?startDate="+moment(d).format('YYYYMMDD')+"&endDate="+moment(d1).format('YYYYMMDD')+"&phone="+this.state.phone;*/}
                                                {/*        fetch(url1,{method:"GET"*/}
                                                {/*        })*/}
                                                {/*            .then(res=>res.json()).then(result=>{*/}
                                                {/*            if (result["code"]=="200"){*/}

                                                {/*                console.log(result)*/}
                                                {/*                this.setState({planList:result["trustee"]})*/}
                                                {/*                this.setState({planNumberList:result["planList"]})*/}
                                                {/*            }*/}
                                                {/*            else {*/}
                                                {/*                Toast.show("暂无委托")*/}
                                                {/*            }*/}
                                                {/*        })*/}

                                                {/*    }}*/}
                                                {/*/>*/}
                                                </div>
                                            ),
                                            closeOnAction: true,
                                            actions: [
                                                {
                                                    key: 'close',
                                                    text: '确定',
                                                }]
                                        })
                                    }}
                                >
                                    选择委托开始日期
                                </Button>
                                <br/>
                                <br/>{this.state.startDate}
                                {/*<div><br/>开始日期:  {this.state.startDate}<br/><br/>结束日期:  {this.state.endDate}</div>*/}

                                <br/>
                                <Button

                                    color='primary' fill='outline'
                                    onClick={() => {
                                        Dialog.show({
                                            closeOnMaskClick:true,
                                            disableBodyScroll:false,
                                            content: (
                                                <div style={{height:"300px"}}>
                                                    <Calendar
                                                        defaultValue={new Date()}
                                                        selectionMode='single'
                                                        onChange={val => {
                                                            this.setState()
                                                            const d = new Date(val);
                                                            const  enddate = moment(d).format("YYYY-MM-DD ");
                                                            this.setState({endDate: enddate})

                                                        }}
                                                    />

                                                    {/*<Calendar*/}
                                                    {/*    selectionMode='single'*/}
                                                    {/*    onChange={val => {*/}
                                                    {/*        //TODO 将数据存储到*/}
                                                    {/*        // console.log(val[0])*/}
                                                    {/*        const d = new Date(val[0]);*/}


                                                    {/*        // const  startdate =d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() ;*/}
                                                    {/*        this.setState({startDate: moment(d).format('YYYYMMDD')})*/}
                                                    {/*        const d1 = new Date(val[1]);*/}
                                                    {/*        this.setState({endDate: moment(d1).format('YYYYMMDD')})*/}
                                                    {/*        // const  endDate =d1.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() ;*/}

                                                    {/*        // console.log(val[1])*/}

                                                    {/*        //提起委托信息*/}
                                                    {/*        const url1 ="http://htjoa.nrnet.cn/dc14/construct/plan/planList?startDate="+moment(d).format('YYYYMMDD')+"&endDate="+moment(d1).format('YYYYMMDD')+"&phone="+this.state.phone;*/}
                                                    {/*        fetch(url1,{method:"GET"*/}
                                                    {/*        })*/}
                                                    {/*            .then(res=>res.json()).then(result=>{*/}
                                                    {/*            if (result["code"]=="200"){*/}

                                                    {/*                console.log(result)*/}
                                                    {/*                this.setState({planList:result["trustee"]})*/}
                                                    {/*                this.setState({planNumberList:result["planList"]})*/}
                                                    {/*            }*/}
                                                    {/*            else {*/}
                                                    {/*                Toast.show("暂无委托")*/}
                                                    {/*            }*/}
                                                    {/*        })*/}

                                                    {/*    }}*/}
                                                    {/*/>*/}
                                                </div>
                                            ),
                                            closeOnAction: true,
                                            actions: [
                                                {
                                                    key: 'close',
                                                    text: '确定',
                                                }]
                                        })
                                    }}
                                >
                                    选择委托结束日期
                                </Button>
                                <br/>
                                <br/> {this.state.endDate}
                                {/*<div><br/>开始日期:  {this.state.startDate}<br/><br/>结束日期:  {this.state.endDate}</div>*/}
                            </Form.Item>




                            <Form.Item
                                name='reason'
                                label="委托原因"
                                rules={[{required: true, message: '请填写原因'}]}
                            >
                                <TextArea
                                    showCount
                                    maxLength={200}
                                />
                            </Form.Item>
                        </Form>



                {/*按时间段委托底部弹出组件*/}
                <>
                    <Popup
                        visible={this.state.bottonPopShow}
                        // visible = {true}
                        onMaskClick={() => {
                            this.setState({bottonPopShow: false})
                        }}
                        bodyStyle={{minHeight: '70vh'}}
                    >


                        <div style={{padding: "12px", fontSize: "large"}}>
                            {/*{console.log(this.state.entrustedTime[0])}*/}
                            <Swiper
                                indicator={(total, current) => (
                                    <AutoCenter  style={{
                                        position: "absolute",
                                        top: "6px",
                                        right:" 6px",
                                        background: "rgb(210,210,210,0.2)",
                                        padding: "4px",
                                        color: "black",
                                        borderRadius: "4px",
                                        userSelect: "none"}}>
                                        {`${current + 1} / ${total}`}
                                    </AutoCenter>
                                )}
                                loop
                                style={{marginTop:'15px'}}
                            >

                                {/*{this.state.planListSelected.map((element,index)=>(*/}
                                {/*    <Swiper.Item key={index}>*/}
                                {/*        <p>计划号: {element}</p>*/}
                                {/*        <p>项目名称: {this.state.message}</p>*/}
                                {/*        <p>日计划: {this.state.message}</p>*/}
                                {/*        <p>施工日期: {this.state.message}</p>*/}
                                {/*    </Swiper.Item>*/}
                                {/*))}*/}


                                {this.state.planListSelected.map((element,index)=>{
                                    //提取计划信息
                                    return(
                                        <Swiper.Item>
                                            <p>计划号: {element["label"]}</p>
                                            <p>项目名称: {element["planName"]}</p>
                                            <p>项目备注:{element["xh"]}</p>
                                            <p>施工日期: {element["dayPlan"]}</p>
                                            <p>施工时间: {element["planDate"]}</p>
                                        </Swiper.Item>
                                    )
                                })}
                            </Swiper>

                            <p>受托人: {this.state.trustee}</p>
                            <p>委托人: {this.state.name}</p>
                            <p>委托周期: {this.state.startDate} 至 {this.state.endDate}</p>
                            {/*/!*<p>委托周期: {this.state.startDate}-{this.state.endDate}</p>*!/*/}
                            <p>
                            委托原因:
                            <TextArea
                                placeholder='原因'
                                value={this.state.reason}
                                readOnly
                            />
                            </p>

                            <Button block className='signButton' color='primary ' size='large'
                                    style={{marginTop: "20px"}}
                                    onClick={this.submitSign}>
                                提交委托
                            </Button>
                        </div>
                    </Popup>
                </>


                <Dialog
                    visible={this.state.dialogVisible}
                    content={(
                        <div>

                            {/*    <SearchBar*/}
                            {/*    placeholder='按姓名模糊查找'*/}
                            {/*    showCancelButton*/}
                            {/*    onSearch={val => {*/}
                            {/*        Toast.show(`你搜索了：${val}`)*/}
                            {/*    }}*/}
                            {/*    onFocus={() => {*/}
                            {/*        Toast.show('获得焦点')*/}
                            {/*    }}*/}
                            {/*    onBlur={() => {*/}
                            {/*        Toast.show('失去焦点')*/}
                            {/*    }}*/}
                            {/*    onClear={() => {*/}
                            {/*        Toast.show('清空内容')*/}
                            {/*    }}*/}
                            {/*    onCancel={() => {*/}
                            {/*        Toast.show('取消搜索')*/}
                            {/*    }}*/}
                            {/*/>*/}

                            <CheckList
                                onChange={(value) => {
                                    this.setState({trustee: value[0]["name"]})
                                    this.setState({trusteeId:value[0]["id"]})
                                    this.refIns.current.setFieldsValue({inOrOut: this.state.trustee})
                                    console.log(value)
                                }}
                                style={{height: '250px', overflow: "scroll"}}>
                                <div>{
                                    list.map((element, index) => {
                                        return (<CheckList.Item key={index} value={element}>
                                            <AutoCenter>
                                                {element["name"]}
                                            </AutoCenter>
                                        </CheckList.Item>)
                                    })
                                }</div>
                            </CheckList>
                        </div>)}
                    closeOnAction
                    onClose={() => {this.setState({dialogVisible: false})}}
                    actions={[
                        {
                            key: 'close',
                            text: '确定',
                        },
                    ]}
                />





            </div>
        )
    }
}